<template>
	<view class="coupon_page">
		<view class="topbar" :style="{'height':topHeight+'px'}"></view>
		<view class="nav_box">
			<u-icon name="arrow-left" size="24" color="#FFFFFF" @click="back()"></u-icon>
			<view style="font-size: 32rpx;">优惠券</view>
			<view style="font-size: 28rpx;" @click="toRole()">使用规则</view>
		</view>
		<view class="tabs_box">
			<u-tabs :list="list1" @click="change" :itemStyle="{'width':'245rpx','height':'88rpx',}" lineWidth="100"
				lineColor="#00CC7B" :activeStyle="{'color':'#00CC7B'}"></u-tabs>
		</view>
		<block v-if="list.length>0">
			<scroll-view scroll-y="true" class="content">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="left">
						<view class="jine">￥<span >{{item.price}}</span></view>
						<view style="font-size: 28rpx;">满{{item.limit}}可用</view>
					</view>
					<view class="among">
						<view style="font-size: 28rpx;font-weight: bold;color: #333333;margin-top: 10rpx;">{{item.name}}</view>
						<view>适用范围：全品类</view>
						<view>下单模式：{{item.order_type==1?"一口价":'悬赏'}}</view>
						<view>有效期至：{{item.enddate}}</view>
					</view>
					<view class="right">
						<image v-show="state==1" src="../../static/wallet/use.png" @click="toPage()"></image>
						<image v-show="state==2" src="../../static/wallet/used.png"></image>
						<image v-show="state==3" src="../../static/wallet/lose.png"></image>
					</view>
				</view>
			</scroll-view>
		</block> 
		<block v-else>
			<view class="null">
				<image src="../../static/order/null.png"></image>
				<view>暂无可使用的优惠券</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {myCoupon} from "../../api/index.js"
	export default {
		data() {
			return {
				topHeight: 0,
				index:1,
				state:1,
				list1: [{
					name: '未使用'
				}, {
					name: '已使用'
				}, {
					name: '已失效'
				}],
				list:[]
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.topHeight = res.statusBarHeight || 24
					console.log(res.statusBarHeight);
				},
			});
		},
		onShow() {
			this.getData()
		},
		methods: {
			getData(){
				myCoupon({state:this.state}).then(res=>{
					console.log(res);
					this.list=res.data.data
				})
			},
			change(e) {
				console.log(e);
				this.index=e.index
				this.state=e.index +1 
				this.getData()
			},
			toRole(){
				uni.navigateTo({
					url:"/pages/wallet/role"
				})
			},
			back(){
				uni.navigateBack({
					delta:1,
				})
			},
			toPage(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.coupon_page {
		width: 100%;
		height: 95vh;
		background-color: #F9F9F9;

		.topbar {
			background-color: #00CC7B;
		}
		.nav_box {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			padding: 0rpx 32rpx;
			display: flex;
			justify-content: space-between;
			background-color: #00CC7B;
			view {
				color: #FFFFFF;
				font-weight: bold;
			}
		}
		.tabs_box {
			width: 100%;
			height: 88rpx;
			background-color: #FFFFFF;

		}
		.content{
			width: 100%;
			height: 1400rpx;
			padding: 32rpx;
			.item{
				width: 100%;
				height: 212rpx;
				padding: 14rpx 32rpx;
				background-image: url('../../static/wallet/couponbg.png');
				background-size: cover;
				display: flex;
				.left{
					width: 196rpx;
					height: 100%;
					text-align: center;
					.jine{
						width: 100%;
						text-align: center;
						font-size: 32rpx;
						color: #FA5A28;
						margin-top: 32rpx;
						margin-bottom: 16rpx;
						span{
							font-size: 48rpx;
						}
					}
				}
			    .among{
					width: 300rpx;
					height: 100%;
					color: #666666;
					font-size: 20rpx;
					view{
						margin-top: 8rpx;
					}
				}
			    .right{
					width: 132rpx;
					height: 100%;
					image{
						width: 132rpx;
						height: 56rpx;
						margin-top: 64rpx;
					}
				}
			}
		}
		
	}
	.null{
		width: 400rpx;
		height: 400rpx;
		margin: auto;
		margin-top: 250rpx;
		text-align: center;
		image{
			width: 236rpx;
			height:248rpx;
		}
		view{
			color: #999999;
			margin-top: 38rpx;
		}
	}
</style>